<template>
	<view class="page">
		<u-navbar :title="navTitle"></u-navbar>
		<view class="introduce-background" v-if="classifyDescText">
			<view class="content">
				<!-- <h1>{{classifyDescName}}</h1> -->
				<view class="desc">{{classifyDescText}}</view>
			</view>
		</view>
		<!--商品列表-->
		<view class="recommend-list">
		  <view class="null" v-if="recommendData.length==0">
		    没有更多了~
		  </view>
		  <view class="recommend-item" v-for="(item,index) in merchantMedicineList" :key="index"  @click="toGoodsDetail(item.id)">
		    <view class="item-img">
		      <image :src="item.thumb_url?item.thumb_url:errImgUrl" mode="widthFix"/>
		    </view>
		    <view class="item-right">
		      <view class="item-des">{{item.name}}</view>
		      <!-- <view class="item-info">{{item.desc}}</view> -->
		      <view class="price">
		        <view><span>￥{{item.selling_price}}</span></view>
		        <image @click.stop="showCartModal(item.id)" class="img" src="../../static/search/cart.png" />
		        <view class="img-icon" v-if="item.shop_cart_num>0">{{item.shop_cart_num}}</view>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="null">
			<u-loadmore bg-color="#f9f9f9;" color='#B5B5B5' :status="loadingStatus" :icon-type="iconType" :load-text="loadText" />
		</view>
		<!--商品列表end-->
		
		<cart-dialog :showModal="showModal" :goodsId="id" @hideCartModal="hideCartModal"></cart-dialog>
		
	</view>
</template>

<script>
	import cartDialog from '@/components/cart-dialog/cart-dialog.vue'
	export default {
		components: {
			cartDialog
		},
		data() {
			return {
				current: 0,
				barWidth: 0,
				merchantMedicineList: [],
				page: 1,
				total: 0,
				goodsDetail: '',
				id: '',
				num: 1,
				showModal: false,
				classify_id: '',
				classify_id_next: '',
				errImgUrl: this.$errorImgUrl,//找不到图片的URL
				buttonList: [],
				loadingStatus: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
				classifyInfo: '',
				classifyDescName: '',
				classifyDescText: '',
				navTitle: '',
				merchant: ''
			}
		},
		/* computed: {
		  merchant(){
		    return this.$store.state.modulesMerchant.merchant
		  },
		}, */
		onReachBottom() {
			if(this.loadingStatus=="loading"||this.total==this.merchantMedicineList.length){
				return
			}
			this.page = this.page+1;
			this.getMerchantMedicineListByNextClassify();
		},
		methods: {
			/* change(index) {
				this.current = index
				this.classify_id = this.buttonList[index].id
				this.getMerchantMedicineListByNextClassify()
			}, */
			
			//获取商品列表
			async getMerchantMedicineListByNextClassify(){
			  this.loadingStatus = 'loading';
			  let res=await this.$api.getMerchantMedicineList({
				  merchant_id: this.merchant.merchant_id,
				  classify_id: this.classify_id,
				  page: this.page,
				  limit: 8
			  },this.$baseUrl);
			  if(res.data.level=='success'){
				if(res.data.data.classify_info){
					this.classifyDescName = res.data.data.classify_info.name
					this.classifyDescText = res.data.data.classify_info.desc
				} 
				if(this.page == 1){
					this.merchantMedicineList = res.data.data.medicine_info;
				} else{
					if(res.data.data.length == 0){
					    this.page--;
					} else{
					    this.merchantMedicineList = this.merchantMedicineList.concat(res.data.data.medicine_info)
					}
				}
				this.total = res.data.page_info.total;
				//loading状态
				if(this.merchantMedicineList.length==this.total){
					this.loadingStatus = 'nomore'
				} else{
					this.loadingStatus = 'loadmore'
				}
			  } else{
				  uni.showToast({
				  	title: res.data.message,
					icon: 'none',
					duration: 1500
				  })
			  }
			},
			
			
			//显示购物车
			showCartModal(id){
			  this.id = id;
			  this.showModal = true;
			},
			//隐藏购物车
			hideCartModal(){
			  this.id = ''
			  this.showModal = false;
			},
			
			//跳转商品详情
			toGoodsDetail(id){
			  wx.navigateTo({url:'/pages/goodsDetail/goodsDetail?id='+id})
			},
		},
		onShow() {
			this.merchant = wx.getStorageSync('merchant')
			this.getMerchantMedicineListByNextClassify();
		},
		onLoad(options) {
			this.classify_id = options.classifyId
			this.navTitle = options.name
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/mixin";
	.page{
		min-height: 100vh;
		background-color: #F9F9F9;
	}
	.nav-wrap{
		position: fixed;
		left: 0;
		right: 0;
		width: 100vw;
		z-index: 99;
	}
	.introduce-background{
		width: 100vw;
		min-height: 96px;
		background-image: url(../../static/goodsDetail/background.png);
		background-size: 100% auto;
		display: flex;
		align-items: center;
		justify-content: center;
		.content{
			width: calc(100vw - 40px);
			color: #FFFFFF;
			h1{
				font-size: 14px;
				font-weight: bold;
			}
			.desc{
				font-size: 14px;
				font-weight: bold;
				/* font-size: 11px;
				margin-top: 10px; */
			}
		}
	}
	.recommend-list{
	  @include flexWrap(flex-start,flex-start);
	  flex-direction: row;
	  justify-content: space-between;
	  width: calc(100vw - 40rpx);
	  background-color: #F9F9F9;
	  padding: 20rpx;
	  .null{
	    width: 100%;
	    padding: 60rpx 0;
	    text-align: center;
	    font-size: 34rpx;
	    color: #959595;
	    height: 100rpx;
	    line-height: 100rpx;
	  }
	  .recommend-item{
	    width: calc((100% - 100rpx)/2);
	    padding: 20rpx;
	    margin-bottom: 10px;
		border-radius: 5px;
	    overflow: hidden;
	    background: #ffffff;
	    @include flex();
	    flex-direction: column;
	    .item-img{
	      width: calc((100vw - 120rpx)/2);
	      height: calc((100vw - 120rpx)/2);
	      border-radius: 16rpx;
	      overflow: hidden;
		  display: flex;
		  align-items: center;
		  image {
			  width: calc((100vw - 120rpx)/2);
		  }
	    }
	    .item-right{
	      @include flex();
	      flex-direction: column;
	      height: 20vw;
		  justify-content: space-between;
	      width: 100%;
	      .item-des{
	        /* height: 6vw; */
	        line-height: 6vw;
	        width: 100%;
	        font-size: 32rpx;
	        @include ellipsis(2);
	      }
	      .item-info{
	        height: 6vw;
	        line-height: 6vw;
	        width: 100%;
	        font-size: 24rpx;
	        color: #aaaaaa;
	        @include ellipsis(2);
	
	      }
	      .price{
	        font-size: 34rpx;
	        @include flex(flex-start,flex-end);
	        flex-direction: row;
	        height: 8vw;
	        width: 100%;
	        color: #F55D0E;
	        font-weight: bold;
	        position: relative;
	        .original{
	          font-size: 22rpx;
	          color: #707070;
	          text-decoration: line-through;
	          padding-left: 20rpx;
	        }
	        .img{
	          margin-left: auto;
	          width: 29px;
	          height: 29px;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	      .sale_count{
	        position: relative;
	        font-size: 24rpx;
	        color: #b2b2b2;
	        width: 100%;
	        height: 40rpx;
	        line-height: 40rpx;
	        @include flex(flex-start);
	        .img{
	          margin-left: auto;
	          width: 40rpx;
	          height: 40rpx;
	        }
	        .img-icon{
	          position: absolute;
	          bottom: 20rpx;
	          right: 0;
	          width: 20rpx;
	          height: 20rpx;
	          background: #e12317;
	          border-radius: 360rpx;
	          color: #ffffff;
	          font-size: 18rpx;
	          text-align: center;
	          line-height: 20rpx;
	        }
	      }
	    }
	
	  }
	}
	
	/* 弹出框 */
	.mask{
	  width: 100%;
	  height: 100%;
	  position: fixed;
	  top: 0;
	  left: 0;
	  background: #000;
	  z-index: 9000;
	  opacity: 0.7;
	}
	.modalDlg{
	  width: 100%;
	  height:45%;
	  position: fixed;
	  bottom:0;
	  left: 0;
	  z-index: 9999;
	  background-color: #ffffff;
	  color: #000000;
	  padding-bottom: 40px;
	}
	
	.modalDlg_top{
	  padding:5px 25px 5px 10px;
	  /*padding-right:25px;*/
	  display: flex;
	  align-items: center;
	  /*border-bottom: 1px solid #eee;*/
	  height: 30%;
	
	}
	.modalDlg_top>img{
	  width:80px;
	  height: 80px;
	}
	.modalDlg_top_right{
	  margin-left:20px;
	  width:calc(100% - 100px);
	}
	.modalDlg_top_right_name{
	  display: flex;
	  align-items: center;
	  color
	  span{
	    @include ellipsis(3)
	  }
	}
	.modalDlg_top_right_name_tag{
	  color:purple;
	  display: inline-block;
	  width:50px;
	  text-align: center;
	  border:1px solid purple;
	  font-size: 10px;
	  border-radius: 5px;
	  margin-right:5px;
	}
	.modalDlg_top_right_name_tag+span{
	  width:200px;
	  display: inline-block;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	}
	.modalDlo_bottom{
	  margin-left:10px;
	}
	.cart_price{
	  margin-top:15px;
	  display: flex;
	  justify-content: space-between;
	  align-items: center
	}
	.cart_price>span:nth-child(1){
	  color:red;
	}
	.modalDlo_center{
	  max-height: 50%;
	  overflow-x: hidden;
	  overflow-y: scroll;
	}
	.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
	  width:100%;
	  /*max-height: 45%;*/
	}
	.modalDlo_center_classify{
	  display:flex;
	  align-items: center;
	  flex-wrap:wrap;
	  margin:10px;
	  /*padding-bottom: 50px;*/
	}
	.modalDlo_center_classify>div{
	  border:1px solid #eee;
	  padding:2.5px 5px;
	  border-radius: 5px;
	  margin-right:5px;
	  text-align: center;
	}
	.modalDlo_center_tit{
	  padding-left:10px;
	}
	.join_cart{
	  width:100%;
	  background: rgb(196, 75, 75);
	  color:#fff;
	  font-size: 20px;
	  text-align: center;
	  line-height: 40px;
	  position: absolute;
	  bottom:0;
	}
	button::after {
	  border: none;
	}
	button {
	  background-color: #fff;
	  line-height: 16px;
	  font-size: 10px;
	  border-radius:0;
	}
	/* 规格 */
	.selectClassify{
	  border:red 1px solid !important;
	  color:red;
	}
	
	.back{
	  background: #ffffff;
	}
	
	.bottom{
	  padding: 30rpx;
	  text-align: center;
	  color: #999999;
	  background: #ffffff;
	}
</style>
